<template>
    <div id="Photo-Root">
        <!-- 照片墙头部信息展示 -->
        <div id="Head" >
            <video muted autoplay="autoplay" loop="loop" poster="@/assets/AAOE58E.jpg">
                <source src="@/assets/PhotoBK.mp4" type="video/mp4" />
            </video>
            <div id="Head-Text-Root">
                <div class="Head-Text-Content line-2">
                    <span>Welcome to campus Photo wall, where you can share everything about yourself!</span>
                </div>
                <div class="Head-Text-Content2 ">
                    <span class="line-2">人生并不像火车要通过每个站似的经过每一个生活阶段。人生总是直向前行走，从不留下什么。</span>
                    <span style="display: block;"> —— 刘易斯</span>
                </div>
                <div class="Head-Text-Content3">
                    <span style="display: block;cursor: pointer;"
                    @click="$router.push('/index/addPhotosPage')"
                    >留 下 我 的 足 迹</span>
                    <span class="bottom"></span>
                </div>
            </div>
        </div>
        <!-- 照片墙分类数据展示 -->
        <div id="Photo-Category-Container" >
        
            <div
            class="Photo-Category-Item" @click="ChooseRecomend"
            :style="ChooseIndex==-1?`border-bottom:3px solid var(--theme-hover-color);border-top:3px solid var(--theme-hover-color)`
            :'border-bottom:3px solid transparent;border-top:3px solid transparent'" 
            >
                <span class="Category-Title">照片推荐</span>
                <span class="Category-Time" >根据平台点赞数量推荐，每天6点更新</span>
            </div>

            <div
            :style="ChooseIndex==index+1 ?`border-bottom:3px solid var(--theme-hover-color);border-top:3px solid var(--theme-hover-color)`
            :'border-bottom:3px solid transparent;border-top:3px solid transparent;'" 
            class="Photo-Category-Item" v-for="(item,index) in PhotoCategory" :key="index" @click="ChooseCategory(index,item.id)">
                <span class="Category-Title">{{item.categoryName}}</span>
                <span class="Category-Time">创建时间：{{ item.createTime  }}</span>
            </div>
        </div>
        <hr>
        <!-- 照片墙详细内容展示 -->
        <div id="Photo-Content-Container" style="margin: 10px;">
           <div id="Content-Show">
                <div id="Content-Title">
                    <span>{{ChooseIndex == -1 ? '照片推荐':PhotoCategory[ChooseIndex-1].categoryName}}</span>
                </div>
                <div id="Content-con">
                    <!-- 加载LOGO -->
                    <!-- <div id="Content-Loadding" v-loading="loading" element-loading-text="拼命加载中" v-if="loading == true" ></div> -->
                    
                    <!-- emtepy LOGO -->
                    <div v-if="ShowContent.length ==0 && loading == false" style="height: 300px;"  >
                        <el-empty description="同学们的数据走丢啦~~~">
                        </el-empty>
                    </div>

                    <!-- 照片内容 -->
                    <div id="Content-Container" v-if="ShowContent.length >0 && loading == false" >
                        <ContentPlugin :detailJump="detailJump" :content="ShowContent" ></ContentPlugin>
                    </div>
                </div>

                <!-- 分页标签 -->
                <div class="fycs" v-if="ShowContent.length>0">
                    <div class="block">
                        <el-pagination
                            layout="prev, pager, next"
                            :total="total">
                        </el-pagination>
                    </div>
                </div>

           </div>

           
           
        </div>

    </div>
</template>

<script>
import {CONTENTRECOMMEND, GETPHOTOCATEGORY,GETPHOTO_BY_CATEGORY} from "@/api/photo"
import ContentPlugin from "@/components/photoContentPlugin.vue" 
export default {
    name: 'SchoolForumIndex',
    components:{ContentPlugin},
    data() {
        return {
            PhotoCategory:[],
            ChooseIndex :-1, // 默认展示推荐内容 
            current:1,
            size :7,
            total:0,
            ShowContent:[],
            SlideBarSetting:{
                width:100,
                x:0,
                marginLeft:10
            },
            loading:true
        };
    },

    mounted() {
        this.init()    
    },

    methods: {
        detailJump(id){
            this.$router.push({
                query:{
                    id
                },
                path:"/index/PhotoDetail"
            })
            console.log(id);
        },
        // 初始化数据
        init(){
            // 获取照片分类
            this.GetPhotoCategory()
            // 获取推荐内容
            this.GetContentRecomend();
        },
        // 获取照片分类
        GetPhotoCategory(){
            GETPHOTOCATEGORY().then(res=>{
                this.PhotoCategory = res
            })
        },
        // 获取推荐内容
        GetContentRecomend(){
            this.RedirectCategory()
            CONTENTRECOMMEND(this.current,this.size).then(res=>{
                if(this.ShowContent == 1){
                    this.ShowContent = []   
                }
                this.ShowContent = res.list
                this.total = res.total
                this.loading = false
                console.log(this.ShowContent);
            })
        },
        // 刷新分页数据
        RedirectCategory(){
            this.current = 1
            this.size = 7
        },
        
        // 根据类别获取照片
        GetPhotoByCategory(CategoryId){
            this.RedirectCategory()
            GETPHOTO_BY_CATEGORY(this.current,this.size,CategoryId).then(res=>{
                this.ShowContent = res.list
                this.total = res.total
                console.log(this.ShowContent);
                this.loading = false
            })
        },
        // 用户选择推荐照片
        ChooseRecomend(){
            this.ChooseIndex = -1
            this.GetContentRecomend()
            this.loading = true
            // window.screenTop (0,0);
        },
        // 用户选择分类照片
        ChooseCategory(index,CategoryId){
            this.GetPhotoByCategory(CategoryId)
            this.ChooseIndex = index+1
            this.loading = true
        },
    },
};
</script>

<style lang="scss" scoped>
@import url(../../assets/themecss/theme.scss);
// 照片墙容器
#Photo-Root{
    // border: 1px solid;
    height: 100%;
    width: 100%;
    overflow: auto;
    
    border-radius:10px ;
    // 照片墙头部信息展示
    #Head{
        overflow: hidden;
        height: 55%;
        width: 100%;
        video{
            height: 100%;
            object-fit: cover;
            width: 100%;
            opacity: 0.9;
            position: relative;
            z-index: 0;
        }
        #Head-Text-Root{
            position: relative;
            position: relative;
            top: -80%;
            text-align: center;
            z-index: 999;
            color: white;
            font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            font-size: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-flow: column;
            
            .Head-Text-Content{
                width: 700px;
                line-height: 40px;
            }
            .Head-Text-Content2{
                margin-top:40px ;
                width: 400px;
                line-height: 20px;
                color: rgb(247, 247, 247);
                font-size: 12px;
            }
            .Head-Text-Content3{
                margin-top: 50px;
                display: flex;
                flex-flow: column;
                align-content: center;
                font-size: 15px;
                justify-content: center;
                background-color: rgb(245, 65, 65);
                padding: 10px 30px 10px 30px;
                border-radius: 5px;
                color: white;
            }
        }
    }
    // 照片墙分类数据展示
    #Photo-Category-Container{
        // margin-top: 10px;
        padding: 10px;
        display: flex ;
        align-content: center;
        justify-content: space-between;
        position: relative;
        .Photo-Category-Item{

            margin: 10px;
            padding: 10px;
            height: 4em;
            flex: 1;
            border-radius: 10px;
            box-shadow: 5px 5px 20px rgb(241, 241, 241);
            // background-color: white;
            background-color: var(--bg-color);
            display: flex;
            flex-flow: column;
            justify-content: space-around;
            text-overflow: ellipsis;
            white-space: nowrap;
            transition: all .3s;
            span{
                display: block;
            }
            .Category-Title{
                cursor: pointer;
                font-weight: bold;
                color:  var(--theme-info-text-color) ;
            }
            .Category-Time{
                cursor: pointer;
                font-size: 12px;
                color: var(--theme-text-color);
            }
        }
    }
    // 照片墙分类底部滑动条
    #Category-Slide-Bar-Container{
        padding: 10px;
        height: 10px;
        margin-top: -30px;

        #Slide-Bar{
            height: 3px; 
            margin: 10px;
            background-color: red;
            transition: all .3s;
            position: relative;
        }
    }
    // 照片墙详细内容展示
    #Photo-Content-Container{
        padding: 10px;
        #Content-Title{
            display: flex;
            align-items: center;
            justify-content: center;
            span{
                display: block;
                padding: 10px;
                font-size:18px;
                border-bottom: 3px solid var(--theme-hover-color);
            }
            color: var(--theme-info-text-color);
            font-weight: bold;
        }
        #Content-Show{
            background-color: var(--bg-color);
            padding: 20px;
            border-radius: 10px;
        }
        #Content-con{
            #Content-Loadding{
                height: 200px;
                background-color: var(--bg-color);
            }
            // 瀑布流布局容器
            #Content-Container{
                width: 100%;
                // border: 1px solid;
                // margin-top: 20px;
            }
        }
    }
    
}

// 限定文本最大行数
.line-2{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; //多行在这里修改数字即可
    overflow:hidden;
    -webkit-box-orient: vertical;
}
.fycs{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
// .box:nth-child(1){
//     // margin-left:0px !important;
//     padding-left:10px !important;
// }
// .box:nth-child(4){
//     margin-right:0px !important;
//     padding-right:0px !important;

// }
</style>